<template>
<div class="container">
    <el-button type="primary" @click="printMult">批量打印</el-button>
    <br />
    <br />
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="库名" width="180" />
        <el-table-column prop="name" label="库位名称" width="180" />
        <el-table-column prop="duanluqi" label="断路器" />
        <el-table-column prop="number" label="编码" />
        <el-table-column prop="qrcode" label="二维码" />
        <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="printSingle(scope.row)">打印</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="templateDesignDiv"></div>
</div>
</template>

<script lang="ts" setup>
import {
    commonPanel,
    commonPanel2,
    commonPanel3
} from '../utils/panelData'
import {
    reactive
} from 'vue';
const tableData: any = [{
        title: '库1',
        name: '库位1',
        duanluqi: '断路器1',
        qrcode: '这是二维码1',
        number: '001'
    }, {
        title: '库2',
        name: '库位3',
        duanluqi: '断路器2',
        qrcode: '这是二维码2',
        number: '002'
    },
    {
        title: '库3',
        name: '库位3',
        duanluqi: '断路器3',
        qrcode: '这是二维码333',
        number: '003'
    },
    {
        title: '库4',
        name: '库位4',
        duanluqi: '断路器444',
        qrcode: '这是二维码444',
        number: '00444'
    },

]
const mypanel: any = reactive(
    commonPanel2
);
const mypanelSingle: any = reactive(commonPanel3)
//单独打印
const printSingle = (row: any) => {
    let printDataSingle: any = row
    printDataSingle.logoImg = ''
    console.log(row)


    //  打印模板的json

    // printData.table = this.data;
    //获取系统时间进行打印
    // let getDate = new Date();
    // printData.printTime = getDate.getFullYear() + '.' + getDate.getMonth() + '.' + getDate.getDay() + ' ';

    const hiprint: any = (window as any).hiprint;
    hiprint.init();

    //调用接口获取数据
    var hiprintTemplate = new hiprint.PrintTemplate({
        template: mypanelSingle,
        settingContainer: ".templateDesignDiv",
    });
    // wewin.LabelPrint(json);
    hiprintTemplate.print([printDataSingle]);
}
//批量打印
const printMult: any = function () {

    const printData: any = tableData
    console.log(printData)

    //  打印模板的json

    // printData.table = this.data;
    //获取系统时间进行打印
    // let getDate = new Date();
    // printData.printTime = getDate.getFullYear() + '.' + getDate.getMonth() + '.' + getDate.getDay() + ' ';

    const hiprint: any = (window as any).hiprint;
    hiprint.init();

    //调用接口获取数据
    var hiprintTemplate = new hiprint.PrintTemplate({
        template: mypanel,
        settingContainer: ".templateDesignDiv",
    });
    // wewin.LabelPrint(json);
    hiprintTemplate.print(printData,{});
}
</script>

<style scoped>
.container {
    width: 80%;
    margin: 20px auto 0 auto;
}
</style>
